<template>
  <el-col class="com_class">
    <el-col class="title">banner管理</el-col>
    <template v-for="(item, index) in bannerlist">
      <el-col :key="index" class="image_item">
        <el-col :span="6" class="banner_img">
          <img :src="item.address" alt srcset />
        </el-col>
        <el-col :span="2">
          <el-button type="warning" plain size="small" @click=" deletbanner(item.id)">删除图片</el-button>
        </el-col>
      </el-col>
    </template>
    <el-col class="image_item">
      <el-col :span="4">
        <el-input v-model="bannerform.name" size="small" placeholder="名称："></el-input>
      </el-col>
      <el-col :span="2">
        <upimg @getpath="getpath" ref="upimg"></upimg>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="onsbumint">确定</el-button>
      </el-col>
    </el-col>
  </el-col>
</template>
<script>
import upimg from "@/components/upimg";

export default {
  data() {
    return {
      bannerlist: [],
      bannerform: {
        name: "",
        address: ""
      }
    };
  },
  components: {
    upimg
  },
  mounted() {
    this.getbanner();
  },
  methods: {
    async getbanner() {
      let res = await this.$store.dispatch("get_banner", "");
      if (!res.code) {
        this.bannerlist = res.data;
      }
    },
    deletbanner(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // console.log(id);
          this.delete_banner({
            ban_id: id
          });
        })
        .catch(() => {});
    },
    async delete_banner(data) {
      let res = await this.$store.dispatch("delete_banner", data);
      console.log(res);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "删除成功"
        });
        this.getbanner();
      }
    },
    getpath(path) {
      this.bannerform.address = path;
    },
    async onsbumint() {
      if (this.bannerform.address && this.bannerform.name) {
        let res = await this.$store.dispatch("add_banner", this.bannerform);
        if (!res.code) {
          this.getbanner();
          this.$refs.upimg.cliearList();
          this.$message({
            type: "success",
            message: "创建banner成功"
          });
          this.$refs.upimg.handleRemove();
        }
      }
    }
  }
};
</script>